<template>
    <!-- 客户管理-保单通讯信息查询页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="保单号码" prop="policyNo">
                        <el-input v-model="searchParams.policyNo" clearable placeholder="保单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <div class="title">
                <span>保单通讯地址维护</span>
            </div>
            <el-form :rules="rules" label-width="120px" class="search_container">
                <el-row class="common-box">
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="chdrnum">保单号</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.chdrnum"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="surname">姓名</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.surname"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="cltsex">性别</label>
                        </el-col>
                        <el-col :span="16">
                             <el-select v-model="mailInfo.cltsex" disabled  clearable placeholder="请选择性别">
                                <el-option
                                v-for="item in sexList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>

                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="chdrcoy">公司</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.chdrcoy"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="cntbranch">Branch</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.cntbranch"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="addrclnt">客户号</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.addrclnt"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="faxno">传真</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.faxno"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="emailaddr">电子邮箱</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.emailaddr"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="cltpcode">邮编</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.cltpcode"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="homephone">住宅电话</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.homephone"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="officphone">办公电话</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.officphone"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="mobilphone">手机</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.mobilphone"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
                    <el-col :span="16">
                        <el-col :span="4" class="common-lab">
                            <label class="cltaddress">收费地址</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled placeholder="" v-model="mailInfo.cltaddress"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import manageConstants from '@/utils/manageConstants';
    import { getMailaddress } from "@/api/customermanage/customerManage.js";
    export default {
        data() {
            return {
                // 查询条件
                rules: {
                    policyNo: [],
                },
                searchParams: {
                    policyNo: '', //保单号
                },
                mailInfo: [],
                loading: false,
                sexList: manageConstants.sexType,
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {

            // 查询列表
            getList() {
                let para = this.searchParams.policyNo;
                if (para == '') {
                    this.$message({
                        message: '查询前请输入查询条件!',
                        type: 'error'
                    });
                    return false
                }
                if (para) {
                    let reg = /^[0-9]*$/
                    let repl = new RegExp(reg);
                    if (!repl.test(para)) {
                        this.$message({
                            message: '保单号码必须为纯数字！',
                            type: 'error'
                        });
                        return false
                    }
                }
                let param = {
                  "policyNo": this.searchParams.policyNo
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                getMailaddress(param).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        this.mailInfo = res.data;
                    } else if(res.resultCode !== 500){
                        this.$message({
                            message: '无符合条件资料！',
                            type: 'error'
                        });
                        this.mailInfo=[];
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 根据条件查询列表
            subGetList() {
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.policyNo = '';
            },

        },
        computed: {
            ...mapGetters(['tags']),
            reload() {
                return this.$store.state.loading.reload;
            }
        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
        .svg-icon {
            font-size: 14px;
            fill: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
    }

    .common-box {
        padding-bottom: 15px;
    }

    .common-lab {
        line-height: normal!important;
        text-align: right;
        .labelName {
            text-align: right;
        }
    }
</style>
